<!--  -->
<template>
  <div class="blockcontent">
    <div class="title">{{title}}</div>
    <div class="addr">会议室地点：{{infor.addr}}</div>
    <div class="detail">{{detail}}</div>
    <router-link :to="{
       path:'/describe/'+infor.ID,
       query:{
           infor:infor
       }
   }">
      <at-button style="margin-top:30px">查看详情</at-button>
    </router-link>
    <img src="../../assets/images/hoverpic.png" class="hoverpic" />
  </div>
</template>

<script>
export default {
  props: ["title", "detail", "infor"],
  data() {
    return {};
  },

  components: {},

  computed: {},


  methods: {}
};
</script>
<style scoped lang="scss">
.blockcontent {
  border-radius: 15px;
  padding: 20px;
  border: 1px solid rgb(235, 235, 235);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: 0.5s;
  .title {
    font-size: 25px;
    font-weight: bold;
  }
  .addr{
    color:grey;
  }
  .detail{
    margin-top: 10px;
  }
  .hoverpic {
    position: absolute;
    width: 70px;
    opacity: 0;
    top: 0;
  }
}
.blockcontent:hover {
  border-color: #fac158;
}
.blockcontent:hover .hoverpic {
  animation: dogshow 0.8s 0s 1 forwards;
}
@keyframes dogshow {
  0% {
    top: -40px;
    opacity: 0;
  }
  50% {
    top: -70px;
    opacity: 1;
  }
  100% {
    top: -60px;
    opacity: 1;
  }
}
</style>